<template>
    <div>
        <Form :label-width="80" inline>

            <FormItem label="学院">
                <Input @on-clear="getAllCollege" v-model="param.name" clearable class="myform"/>
            </FormItem>
            <FormItem label="代码">
                <Input @on-clear="getAllCollege" v-model="param.code" clearable class="myform"/>
                <Button icon="ios-search" type="success" @click="getAllCollege" class="btn">查询</Button>
            </FormItem>
        </Form>
        <Row>
            <Col span="2">
                <Button class="mybtn1" icon="md-add-circle" @click="modal.addCollegeFlag = true" type="info">添加</Button>
            </Col>
            <Col span="2">
                <Button style="margin-left: -40px" class="mybtn1" icon="md-cloud-upload" @click="" type="info">批量导入</Button>
            </Col>
            <Col span="2">
                <!--<Button class="mybtn1" icon="md-cloud-download" @click="" type="primary">模板下载</Button>-->
                <download-excel
                        class = "export-excel-wrapper"
                        :data = "json_data"
                        :fields = "json_fields"
                        name = "学院信息表.xls">
                    <Button style="margin-left: -50px" class="mybtn1" icon="md-cloud-download" type="primary">模板下载</Button>
                </download-excel>
            </Col>
            <Col span="2">
                <Button style="margin-left: -60px" class="mybtn1" icon="md-cloud-download" @click="modalUpload.modalUploadFlag = true" type="primary">导入数据</Button>
            </Col>
        </Row>
        <Table border :columns="columns" :data="data">
            <template slot-scope="{ row, index }" slot="action">
                <div v-if="!row.editFlag">
                <Button icon="ios-build" type="primary" size="small" style="margin-right: 5px" @click="row.editFlag = true">编辑</Button>
                <Poptip
                        confirm
                        transfer
                        title="是否删除?"
                        @on-ok="remove(row,index)"
                        @on-cancel="$Message.info('已取消')">
                <Button icon="md-trash" type="error" size="small">删除</Button>
                </Poptip>
                </div>
                <div v-else>
                    <Button type="success" icon="ios-paper" size="small" style="margin-right: 5px"
                            @click="row.editFlag = false,saveUpdateCollege(row)">保存
                    </Button>
                    <Button type="info" icon="ios-hand" size="small" @click="row.editFlag = false">取消</Button>
                </div>
            </template>
        </Table>
        <Page :total="total" :page-size="param.size" @on-change="changePage" @on-page-size-change="changePageSize"
              show-sizer show-total show-elevator transfer/>
        <add-college :modal="modal"/>
        <uploda-modal :modal="modalUpload" @changeStatus="getAllCollege"/>
    </div>
</template>

<script>
    import addCollege from "../../components/modal/basicData/addCollege";
    import uplodaModal from "../../components/modal/basicData/uplodaModal";
    import Vue from 'vue';
    import JsonExcel from 'vue-json-excel';

    Vue.component('downloadExcel', JsonExcel);

    export default {
        components:{
            uplodaModal,
            addCollege
        },
        data() {
            return {
                modal:{
                    addCollegeFlag:false,
                },
                modalUpload:{
                    modalUploadFlag:false,
                    url:"/college/uplodaExcl"
                },
                total:0,
                param:{
                  page:1,
                  size:2,
                  name:'',
                  code:'',
                },
                columns: [
                    {
                        type: 'index',
                        width: 70,
                        title: '序号',
                        align: 'center'
                    },
                    {
                        title: '学院',
                        sortable:true,
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-input value={params.row.name} oninput={(e) => {
                                    params.row.name = e
                                }}/>
                            } else {
                                return <span>{params.row.name}</span>
                            }
                        }
                    },
                    {
                        title: '代码',
                        sortable:true,
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-input value={params.row.code} oninput={(e) => {
                                    params.row.code = e
                                }}/>
                            } else {
                                return <span>{params.row.code}</span>
                            }
                        }
                    },
                    {
                        title: '创建时间',
                        sortable:true,
                        key: 'createTime'
                    },
                    {
                        title: '更新时间',
                        sortable:true,
                        key: 'updateTime'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                data: [],
                assignData:[], //克隆用
                json_fields:{
                    "学院":"name",
                    "代码":"code"
                },
                json_data:[
                    {
                        name:'',
                        code:''
                    }
                ]
            }
        },
        methods: {
            fetch(){

            },
            /**
             * 点击下一页
             * @param val
             */
            changePage(val) {
                this.param.page = val
                this.getAllCollege()
            },
            /**
             * 切换分页的每页显示条数
             * @param val
             */
            changePageSize(val) {
                this.param.size = val
                if (this.param.page === 1) {
                    this.getAllCollege()
                }
            },
            /**
             * 删除
             *
             */
            remove(row,index) {
                this.http.delete(`/college/deleteCollegeById/${row.collegeId}`).then(res =>{
                    if(res){
                        this.$Message.success('删除成功！')
                        this.data.splice(index, 1);
                    }
                })

            },
            /**
             * 获取全部
             */
            getAllCollege(){
                this.http.post("/college/getAllCollege",this.qs.parse(this.param)).then(res=>{
                    if (res.data) {
                        this.data = res.data.list.map(m => {
                            m.editFlag = false
                            return m
                        })
                        this.total = res.data.total
                    }
                })
            },
            /**
             * 保存更新
             */
            saveUpdateCollege(row){
                let collegeDo = row;
                console.log(collegeDo);
                this.http.post("/college/saveUpdateCollege", this.qs.parse(collegeDo)).then(res => {
                    if (res) {
                        this.$Message.success("修改成功")
                    }
                })
            },
        },
        created() {
            this.getAllCollege()

        },
    }
</script>

<style scoped>
    .myform {
        width: 300px;
    }

    .btn {
        margin-left: 10px;
    }
</style>
